<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon" id="mainCon">
      <el-row class="reactInfo">
        <el-col :span="10">
          <div class="imgBox">
            <img style="width: 66px; height: 66px" :src="imgsrc" alt="" />
          </div>
          <div class="infoBox">
            <p class="name" v-if="userType === 'QY'">
              {{ reactDetail.companyName }}
            </p>
            <p class="name" v-if="userType === 'XM'">
              {{ reactDetail.projectName }}
            </p>
            <p class="date">巡查日期：{{ reactDetail.inspectionDate }}</p>
            <p
              class="date"
              v-if="
                reactDetail.rectificationStatus === 'COMPLETE_RECTIFICATION'
              "
            >
              整改结果：{{ reactDetail.rectificationStatusDesc }}
              {{ reactDetail.isDelay ? '未延期' : '已延期' }}
            </p>
          </div>
        </el-col>
        <el-col :span="14" class="reactStatus">
          <div style="font-size: 14px; color: #333333; font-weight: 400">
            <span>整改状态：</span>
            <span style="margin-right: 10px">{{
              reactDetail.rectificationStatusDesc
            }}</span>
            <el-link
              v-if="
                reactDetail.rectificationStatus === 'PENDING_RECTIFICATION' ||
                reactDetail.rectificationStatus === 'IN_PROCESS_RECTIFICATION'
              "
              type="primary"
              @click="handleAttach"
              >处理整改资料</el-link
            >
          </div>
          <div
            class="progressBar"
            v-if="
              reactDetail.rectificationStatus === 'PENDING_RECTIFICATION' ||
              reactDetail.rectificationStatus === 'IN_PROCESS_RECTIFICATION' ||
              reactDetail.rectificationStatus === 'COMPLETE_RECTIFICATION'
            "
          >
            <div class="subProgress">
              <span
                class="blueCircle circleNum"
                v-if="
                  reactDetail.rectificationStatus == 'PENDING_RECTIFICATION'
                "
                >1</span
              >
              <i class="icon iconfont iconwancheng" v-else></i>
              <span
                :class="
                  reactDetail.rectificationStatus == 'PENDING_RECTIFICATION'
                    ? 'boldColor middleText'
                    : 'greyColor middleText'
                "
                >待整改</span
              >
              <el-tooltip content="Top center" placement="top" effect="dark">
                <div slot="content">
                  待整改状态：巡查结果为需整改，但未提交“整改资料”
                </div>
                <i class="icon iconfont iconhuabanfuben greyColor"></i>
              </el-tooltip>
            </div>
            <div class="borderRight bgcTheme"></div>
            <div class="subProgress">
              <span
                class="whiteCircle circleNum"
                v-show="
                  reactDetail.rectificationStatus == 'PENDING_RECTIFICATION'
                "
                >2</span
              >
              <span
                class="blueCircle circleNum"
                v-show="
                  reactDetail.rectificationStatus == 'IN_PROCESS_RECTIFICATION'
                "
                >2</span
              >
              <i
                class="icon iconfont iconwancheng"
                v-show="
                  reactDetail.rectificationStatus == 'COMPLETE_RECTIFICATION'
                "
              ></i>
              <span
                :class="
                  reactDetail.rectificationStatus == 'IN_PROCESS_RECTIFICATION'
                    ? 'boldColor middleText'
                    : 'greyColor middleText'
                "
                >整改中</span
              >
              <el-tooltip content="Top center" placement="top" effect="dark">
                <div slot="content">
                  整改中状态：巡查结果为需整改，已提交“整改资料”，但未进行“完成整改”操作
                </div>
                <i class="icon iconfont iconhuabanfuben greyColor"></i>
              </el-tooltip>
            </div>
            <div
              :class="
                reactDetail.rectificationStatus == 'COMPLETE_RECTIFICATION'
                  ? 'borderRight bgcTheme'
                  : 'borderRight greyLine'
              "
            ></div>
            <div class="subProgress">
              <span
                :class="
                  reactDetail.rectificationStatus == 'COMPLETE_RECTIFICATION'
                    ? 'blueCircle circleNum'
                    : 'whiteCircle circleNum'
                "
                >3</span
              >
              <span
                :class="
                  reactDetail.rectificationStatus == 'COMPLETE_RECTIFICATION'
                    ? 'boldColor middleText'
                    : 'greyColor middleText'
                "
                >整改完成</span
              >
              <el-tooltip content="Top center" placement="top" effect="dark">
                <div slot="content">
                  完成整改：完成整改状态：巡查结果为需整改，已提交整改资料，并完成整改操作
                </div>
                <i class="icon iconfont iconhuabanfuben greyColor"></i>
              </el-tooltip>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="spacing"></div>
      <el-row class="contentInfo">
        <div class="contentTitle">巡查情况</div>
        <div class="contentInfoList">
          <el-row class="subTitleBox">
            <el-col :span="24">
              <div
                class="secondaryTitle secondaryTitleTheme"
                v-if="userType === 'QY'"
              >
                企业信息
              </div>
              <div
                class="secondaryTitle secondaryTitleTheme"
                v-if="userType === 'XM'"
              >
                项目信息
              </div>
            </el-col>
          </el-row>
          <div v-if="userType === 'QY'" style="padding: 0 24px">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >企业名称：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.companyName
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >法人代表：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.boss
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >组织机构代码：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.organizationCode
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >单位地址：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.address
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >劳资负责人：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.laborLeader
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >所属行业：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.industryName
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >法人联系电话：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.bossTel
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >工商登记执照代码：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.licenseCode
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >单位联系方式：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.contactType
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >劳资负责人联系电话：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.laborLeaderTel
                }}</span>
              </el-col>
            </el-row>
          </div>
          <div v-if="userType === 'XM'" style="padding: 0 24px">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >项目名称：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.projectName
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >施工方：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.pbName
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >行业类型：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.industryName
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >项目负责人：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.leader
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >单位地址：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.address
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >建设方：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.pcName
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >投资类型：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.investmentDesc
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >联系电话：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.leaderTel
                }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="contentInfoList">
          <el-row class="subTitleBox">
            <el-col :span="24">
              <div class="secondaryTitle secondaryTitleTheme">巡查登记</div>
            </el-col>
          </el-row>
          <div style="padding: 0 24px">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >巡查日期：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.inspectionDate
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >巡查员：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.inspectionPerson
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >巡查内容：</span
                >
              </el-col>
              <div class="table">
                <el-table
                  :data="tableList"
                  v-loading="loading"
                  :header-cell-style="{
                    background: '#eef1f6',
                    color: '#606266',
                  }"
                  highlight-current-row
                  stripe
                  style="border: 1px solid #dfe6ec"
                >
                  <el-table-column
                    label="序号"
                    type="index"
                    width="80"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="typeName"
                    label="巡查类型"
                    align="left"
                    min-width="20%"
                  ></el-table-column>
                  <el-table-column
                    prop="itemName"
                    label="巡查项"
                    align="center"
                    :formatter="formatTd"
                    min-width="30%"
                  ></el-table-column>
                  <el-table-column
                    label="巡查结果"
                    align="center"
                    :formatter="formatTd"
                    min-width="20%"
                  >
                    <template slot-scope="scope">
                      {{ scope.row.value.toString()
                      }}{{ scope.row.resultType | unit }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="凭证附件"
                    align="center"
                    :formatter="formatTd"
                    min-width="20%"
                  >
                    <template slot-scope="scope">
                      <el-link
                        type="primary"
                        @click="showAttach(scope.row.disburseFile)"
                        >附件</el-link
                      >
                    </template>
                  </el-table-column>
                  <!-- 表格数据为空时，页面显示 -->
                  <div slot="empty" v-show="tableList.length <= 0">
                    <emptyTable emptyText="暂无相关数据"></emptyTable>
                  </div>
                </el-table>
              </div>
            </el-row>
          </div>
        </div>
        <div class="contentInfoList">
          <el-row class="subTitleBox">
            <el-col :span="24">
              <div class="secondaryTitle secondaryTitleTheme">巡查结果</div>
            </el-col>
          </el-row>
          <div style="padding: 0 24px">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >巡查结果：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.inspectionResultDesc
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >存在问题：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">
                  <span>{{ reactDetail.inspectionProblem }}</span>
                </span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >整改期限：</span
                >
                <span class="gridContent empContentSty color666 fontSizeF">{{
                  reactDetail.rectificationDate || '--'
                }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-row>
      <div class="spacing"></div>
      <el-row
        class="contentInfo contentInfoLast"
        v-if="
          reactDetail.rectificationStatus === 'PENDING_RECTIFICATION' ||
          reactDetail.rectificationStatus === 'IN_PROCESS_RECTIFICATION' ||
          reactDetail.rectificationStatus === 'COMPLETE_RECTIFICATION'
        "
      >
        <div class="contentTitle">
          整改资料
          <span
            class="desc"
            v-if="reactDetail.rectificationStatus === 'PENDING_RECTIFICATION'"
            >须由被巡查单位填写（或由劳动监察代填），填写完成后，整改状态变更为“整改中”</span
          >
        </div>
        <div style="padding: 0 24px">
          <el-row class="detailInfoItemSty" v-if="type === 'detail'">
            <el-col class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >整改说明：</span
              >
              <span class="gridContent empContentSty color666 fontSizeF">{{
                reactDetail.rectificationExplain
              }}</span>
            </el-col>
          </el-row>
          <el-row class="detailInfoItemSty" v-if="type === 'detail'">
            <el-col class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >整改凭证：</span
              >
              <span
                class="gridContent empContentSty color666 fontSizeF"
                v-if="
                  reactDetail.rectCredentials &&
                  reactDetail.rectCredentials.length > 0
                "
              >
                <span>已上传</span>
                <el-link
                  class="seeFile"
                  style="margin-top: -2px"
                  @click="showAttach(reactDetail.rectCredentials)"
                  >查看</el-link
                >
              </span>
              <span v-else class="gridContent empContentSty color666 fontSizeF"
                >未上传</span
              >
            </el-col>
          </el-row>
          <el-row class="detailInfoItemSty" v-if="type === 'edit'">
            <el-col class="labelWidthSty">
              <el-form
                :model="formData"
                label-width="112px"
                :rules="formRules"
                ref="formData"
                class="form"
              >
                <el-form-item label="整改说明" prop="rectificationExplain">
                  <el-input
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    v-model.trim="formData.rectificationExplain"
                    placeholder="请输入整改说明"
                  ></el-input>
                </el-form-item>
                <el-form-item label="整改凭证">
                  <uploadAnnex
                    @getFileList="getFileList"
                    :limitationFactor="limitationFactor"
                    @getFile="getFile"
                    :upLoadFile="upLoadCertificateFile"
                  />
                </el-form-item>
                <el-row>
                  <uploadResult
                    style="margin-left: 120px"
                    :resultList="upLoadCertificateFile"
                    @callBackResult="getFile"
                  />
                </el-row>
                <el-form-item class="operateBtns" label-width="0">
                  <el-button
                    class="commonBut saveBtn"
                    type="primary"
                    @click="saveAttach('formData')"
                    :loading="isSaveLoading"
                    >保存</el-button
                  >
                  <el-button class="commonBut" @click="cancleSave"
                    >取消</el-button
                  >
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </el-row>
      <contractEnclosureDialog
        v-if="isShowAttach"
        dialogTitle="凭证附件"
        :tableData="upLoadFile"
        @closeDialog="hiddenAttach"
      ></contractEnclosureDialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RectificationDetail',
  data() {
    return {
      userType: '',
      back: true,
      titleText: '返回列表',
      reactDetail: {},
      tableList: [],
      upLoadFile: [], //展示附件
      formData: {
        rectificationExplain: '',
      },
      formRules: {
        rectificationExplain: [
          {
            required: true,
            message: '请输入整改说明',
            trigger: 'blur',
          },
        ],
      },
      upLoadCertificateFile: [], //上传凭证附件
      srcList: [],
      oldSrcList: [],
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '请上传整改凭证，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      type: 'detail',
      isShowAttach: false,
      imgsrc: '',
      isSaveLoading: false,
    }
  },
  async created() {
    if (
      this.$store.state.userType === 'PROJECT_ADMINISTRATOR' ||
      this.$store.state.userType === 'LABOR_ADMINISTRATOR'
    ) {
      this.userType = 'XM'
      this.imgsrc = '../../../static/img/patrol/project.png' //项目
    }
    if (this.$store.state.userType === 'COMPANY') {
      this.userType = 'QY'
      this.imgsrc = '../../../static/img/patrol/company.png' //企业
    }
    this.$route.query.type && (this.type = this.$route.query.type)
    await this.getRectificationDetail()
    if (this.$route.query.type === 'edit') {
      if (
        this.reactDetail.rectCredentials &&
        this.reactDetail.rectCredentials.length > 0
      ) {
        this.upLoadCertificateFile = JSON.parse(
          JSON.stringify(this.reactDetail.rectCredentials)
        )
        for (let i = 0; i < this.reactDetail.rectCredentials.length; i++) {
          this.srcList.push(this.reactDetail.rectCredentials[i].url)
          this.oldSrcList.push(this.reactDetail.rectCredentials[i].url)
        }
      }
      this.scrollBot()
    }
  },
  filterField: {
    unit(resultType) {
      let unitName = ''
      switch (resultType) {
        case 'POPULATION':
          unitName = '人'
          break
        case 'PERCENTAGE':
          unitName = '%'
          break
        case 'MONEY':
          unitName = '元'
          break
        case 'AMOUNT':
          unitName = '个'
          break
        case 'DAYS':
          unitName = '天'
          break
        case 'HOURS':
          unitName = '小时'
          break
        default:
          break
      }
      return unitName
    },
  },
  methods: {
    // 查询详情
    getRectificationDetail() {
      let url = null
      if (this.userType === 'QY') {
        url = 'api-gov/ipqcjobCompany/expand/ipqcCompanyDetail'
      }
      if (this.userType === 'XM') {
        url = 'api-gov/ipqcjobProject/expand/ipqcProjectDetail'
      }
      return this.axios({
        method: 'post',
        url,
        data: {
          id: this.$route.query.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            const results = response.data.result
            this.reactDetail = results
            this.formData.rectificationExplain =
              this.reactDetail.rectificationExplain
            this.tableList = results.ipqctemExpandVOS || []
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 处理整改资料
    handleAttach() {
      this.type = 'edit'
      this.formData.rectificationExplain = this.reactDetail.rectificationExplain
      if (
        this.reactDetail.rectCredentials &&
        this.reactDetail.rectCredentials.length > 0
      ) {
        this.upLoadCertificateFile = JSON.parse(
          JSON.stringify(this.reactDetail.rectCredentials)
        )
        for (let i = 0; i < this.reactDetail.rectCredentials.length; i++) {
          this.srcList.push(this.reactDetail.rectCredentials[i].url)
          this.oldSrcList.push(this.reactDetail.rectCredentials[i].url)
        }
      }
      this.scrollBot()
    },
    cancleSave() {
      this.type = 'detail'
      this.formData.rectificationExplain = ''
      this.upLoadCertificateFile = []
    },
    // 滚动到最下
    scrollBot() {
      var ele = document.getElementById('mainCon')
      setTimeout(function () {
        //设置滚动条到最底部
        ele.scrollTop = ele.scrollHeight
      }, 300)
    },
    // 上传附件
    getFile(val) {
      this.upLoadCertificateFile = val
    },
    getFileList(val) {
      this.srcList.push(val)
      this.oldSrcList.push(val)
    },
    // 展示附件
    showAttach(upLoadFile) {
      this.upLoadFile = upLoadFile
      this.isShowAttach = true
    },
    hiddenAttach() {
      this.isShowAttach = false
    },
    // 保存资料
    saveAttach(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          let url = 'api-gov/ipqcjobCompany/expand/modifyIpqcCompany'
          if (this.userType === 'XM') {
            url = 'api-gov/ipqcjobProject/expand/modifyIpqcProject'
          }
          return this.axios({
            method: 'post',
            url,
            data: {
              id: this.reactDetail.id,
              rectificationExplain: this.formData.rectificationExplain,
              files: JSON.stringify(this.upLoadCertificateFile),
            },
          })
            .then((response) => {
              this.isSaveLoading = false
              if (!response.data.hasError) {
                this.cancleSave()
                this.getRectificationDetail()
              } else {
                this.$message.error(response.data.errorMsg)
              }
            })
            .catch((error) => {
              this.isSaveLoading = false
              if (error.response) {
                this.$message.error(error.response.data)
              }
            })
        } else {
          this.$message.error('请按照提示规则输入内容!')
          return false
        }
      })
    },
    // 合并行判断条件
    mergeSpan(tableData) {
      let spanArr = []
      let concat = 0
      tableData.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1)
        } else {
          if (item.typeId === tableData[index - 1].typeId) {
            //需合并相同内容的判断条件
            spanArr[concat]++
            spanArr.push(0)
          } else {
            spanArr.push(1)
            concat = index
          }
        }
      })
      return {
        spanArr,
      }
    },
    // 合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.mergeSpan(this.tableList).spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },
    goBack() {
      let url = '/home/patrol/dailyInspection'
      if (this.$route.query.taskType === 'SPECIAL') {
        url = '/home/patrol/specialInspection'
      }
      this.$router.push(url)
      this.$store.commit('GOBACK_NAME', {
        oldUrl: url,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  padding: 0;
  .reactInfo {
    padding: 24px 23px 20px 23px;
    background: #fff;
    .imgBox {
      display: inline-block;
      width: 72px;
      height: 66px;
    }
    .infoBox {
      vertical-align: top;
      display: inline-block;
      .name {
        font-size: 20px;
        color: #333333;
        font-weight: 500;
        line-height: 36px;
      }
      .date {
        font-size: 14px;
        color: #333333;
        font-weight: 400;
        line-height: 26px;
      }
    }
    .reactStatus {
      border-left: 1px solid #dcdfe6;
      padding: 14px 22px;
      position: relative;
      .progressBar {
        margin-top: 16px;
        height: 36px;
        .subProgress {
          display: inline-block;
          height: 36px;
          .iconwancheng {
            font-size: 32px;
            position: relative;
            top: 1px;
            color: #409eff;
          }
          .iconhuabanfuben {
            position: relative;
            top: -4px;
          }
          .middleText {
            position: relative;
            top: -5px;
          }
          .boldColor {
            font-weight: bold;
          }
          .greyColor {
            color: #999;
          }
          .circleNum {
            display: inline-block;
            vertical-align: middle;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            position: relative;
            top: -6px;
          }
          .blueCircle {
            background: #3189ea;
            color: #fff;
          }
          .whiteCircle {
            border: 1px solid #999;
            color: #999;
          }
        }
        .borderRight {
          display: inline-block;
          vertical-align: middle;
          width: 30px;
          height: 1px;
          border-top: 1px solid #409eff;
          position: relative;
          top: -6px;
        }
        .greyLine {
          border-top: 1px solid #999;
        }
      }
    }
  }
  .contentInfo {
    background: #fff;
    &List {
      position: relative;
      padding-bottom: 18px;
      &::after {
        width: 100%;
        height: 1px;
        position: absolute;
        content: '';
        background-color: #e3e7e9;
        transform: translateX(0.5);
        top: 0;
      }
      &Item {
        padding-left: 38px;
      }
    }
    .contentTitle {
      height: 54px;
      line-height: 54px;
      font-size: 18px;
      color: #333333;
      font-weight: 500;
      padding-left: 26px;
      .desc {
        font-size: 14px;
      }
    }
    .secondaryTitle {
      // position: relative;
      // padding-left: 20px;
      // height: 48px;
      // line-height: 48px;
      // font-size: 16px;
      // color: #333333;
      // font-weight: 500;
      margin-top: 20px;
    }
    .subBox {
      font-size: 14px;
      color: #666666;
      font-weight: 400;
      min-height: 36px;
      margin-bottom: 6px;
      .subTitle {
        display: inline-block;
        color: #333333;
      }
      .gridContent {
        display: inline-block;
        vertical-align: top;
        color: #333333;
      }
      .reason {
        display: inline-block;
      }
    }
    .table {
      padding-top: 32px;
      padding-bottom: 22px;
    }
  }
  .contentInfoLast {
    padding-bottom: 18px;
    .contentTitle {
      position: relative;
      &::after {
        width: 100%;
        height: 1px;
        position: absolute;
        content: '';
        background-color: #e3e7e9;
        transform: translateX(0.5);
        bottom: 0;
        left: 0;
      }
    }
  }
  /deep/ .el-button {
    text-align: center;
    width: 88px;
    height: 36px;
    line-height: 36px;
  }
}
.operateBtns {
  text-align: center;
}
/deep/ .el-textarea {
  width: 50%;
}
.subTitleBox {
  padding: 0px 24px;
}
</style>
